<template>
  <nav id="nav" v-if="showNav">
    <nuxt-link v-for="(item, key) in nav" :key='key' :class="activeRoute == item.name ? 'active' : ''" :to="item.path">{{item.text}}</nuxt-link>
  </nav>
</template>
<script>
 export default {
  data() {
    return {
      nav: [
        {
          path: '/',
          name: 'index',
          text: '首页'
        },
        {
          path: '/shopping',
          name: 'shopping',
          text: '商城'
        },
        {
          path: '/user',
          name: 'user',
          text: '我的'
        }
      ]
    }
  },
  computed: {
    activeRoute() {
      return this.$route.name
    },
    showNav() {
      return ['index', 'shopping', 'user'].indexOf(this.activeRoute) > -1
    }
  }
}
</script>
<style lang="sass" scoped>
.active
  color: red
</style>

 
